<template>
    <div class="myAgeContainer">
        <div class="back" @click="goBack"></div>
        <div class="title"></div>
        <transition name="question" appear>
            <div class="middleQuestion" v-if="myAge>=18 && myAge <=48"></div>
            <div class="smallQuestion" v-if="myAge>=10 && myAge <18"></div>
            <div class="largeQuestion" v-if="myAge>=45 && myAge <55"></div>
        </transition>
        <p class="myAge">{{ myAge }}</p>
        <van-cell is-link @click="showPopup" class="chooseAge">{{ ageDate[0] }}-{{ ageDate[1] }}-{{ ageDate[2] }}</van-cell>
        <van-popup v-model="show" position="bottom" round>
            <van-datetime-picker
                v-model="currentDate"
                type="date"
                title="选择年月日"
                :min-date="minDate"
                :max-date="maxDate"
                @cancel="show=false"
                @confirm="onConfirm"
            />
        </van-popup>
        <div class="next" @click="gotoHowLongSick"></div>
    </div>
</template>

<script>
    import {Popup,Cell,DatetimePicker} from 'vant'
    export default {
        name:'myAge',
        components:{
            'van-popup':Popup,
            'van-cell': Cell,
            'van-datetime-picker':DatetimePicker,
        },
        data(){
            return{
                myAge:25,
                isPcos:this.$route.params.isPcos,
                show: false,
                ageDate:['1999','11','22'],
                minDate: new Date(1980, 0, 1),
                maxDate: new Date(2006, 11, 31),
                currentDate: new Date(2021, 0, 17),
            }
        },
        methods:{
            goBack(){
                this.$router.back()
            },
            gotoHowLongSick(){
                localStorage.setItem('age',this.myAge)
                localStorage.setItem('birthday',this.ageDate[0]+'-'+this.ageDate[1]+'-'+this.ageDate[2])
                this.$router.push({
                    name:'howLongSick',
                })
            },
            showPopup() {
                this.show = true;
            },
            onConfirm(value){
                const date=value.toLocaleDateString()
                this.show=false
                const now=new Date()
                const nowDate=(now.toLocaleString()).split('/')
                this.ageDate=date.split('/')
                this.myAge=nowDate[0]-parseInt(this.ageDate[0])
                // if(nowDate[0]>this.ageDate[0]){
                //     if(nowDate[1]>this.ageDate[1]){
                //         if(nowDate[2]>this.ageDate[2]){
                //             this.ageDate=date.split('/')
                //             this.myAge=nowDate[0]-parseInt(this.ageDate[0])
                //         }
                //     }
                //     else if(nowDate[1]===this.ageDate[1]){
                //         if(nowDate[2]>=this.ageDate[2]){
                //             this.ageDate=date.split('/')
                //             this.myAge=now.getFullYear()-parseInt(this.ageDate[0])
                //         }
                //     }
                // }
            }
        }
    }
</script>

<style scoped>
    .myAgeContainer{
        width: 100vw;
        height: 100vh;
        background-color: #F6F8FA;
        position: relative;
        overflow: hidden;
        scrollbar-width: none; 
    }
    .back{
        background-image: url(../assets/img/0-icon@2x/0-18back.png);
        width: 0.48rem;
        height: 0.48rem;
        position: absolute;
        background-position: center;
        background-size: contain;
        top:1.12rem;
        left:.64rem;
    }
    .title{
        position: absolute;
        background-image: url(../assets/img/0-icon@2x/0-9sickKnow.png);
        width: 1.28rem;
        height: .68rem;
        background-position: center;
        background-size: contain;
        left: 3.1rem;
        top: 1.08rem;
    }
    .middleQuestion{
        position: absolute;
        background-image: url(../assets/img/0-icon@2x/0-15age18-48.png);
        background-repeat: no-repeat;
        width: 5.76rem;
        height: 1.4rem;
        background-position: center;
        background-size: contain;
        left: 0.8rem;
        top:2.28rem;
    }
    .smallQuestion{
        position: absolute;
        background-image: url(../assets/img/0-icon@2x/0-16age10-18.png);
        background-repeat: no-repeat;
        width: 5.76rem;
        height: 1.4rem;
        background-position: center;
        background-size: contain;
        left: 0.8rem;
        top:2.28rem;
    }
    .largeQuestion{
        position: absolute;
        background-image: url(../assets/img/0-icon@2x/0-17age45-55.png);
        background-repeat: no-repeat;
        width: 6.22rem;
        height: 1.4rem;
        background-position: center;
        background-size: contain;
        left: 0.8rem;
        top:2.28rem;
    }
    .myAge{
        position: absolute;
        top:5.76rem;
        left: 3.2rem;
        font-size: 0.8rem;
        font-family: 'PingFangSC-Mediuem';
        color: #333333;
    }

    .notNext{
        background-image: url(../assets/img/0-icon@2x/0-21notNext.png);
        width: 6.22rem;
        height: 0.88rem;
        position: absolute;
        top:13.7rem;
        left: 0.64rem;
        background-position: center;
        background-size: contain;
        border-radius: 0.4rem;
    }
    .next{
        background-image: url(../assets/img/0-icon@2x/0-20next.png);
        width: 6.22rem;
        height: 0.88rem;
        position: absolute;
        top:13.7rem;
        left: 0.64rem;
        background-position: center;
        background-size: contain;
        border-radius: 0.4rem;
    }
</style>

<style>
    .chooseAge{
        position: absolute;
        left: 0.48rem;
        top:7.62rem;
        width: 6.54rem;
        height: 1rem;
        border-radius: 0.3rem;
        border: 1px solid #FFF;
        background-color: #FFF;
    }
    .chooseAge i{
        background-image: url(../assets/img/0-icon@2x/0-19canlendar.png);
        width: 0.36rem;
        height: 0.36rem;
        background-position: center;
        background-size: contain;
        margin-top: 0.1rem;
    }
    .chooseAge i::before{
        content: '';
    }
    .chooseAge span{
        color: #333333;
        font-size: 0.28rem;
        font-family: 'PingFangSC-Regular';
    }
</style>